<template>
  <div class="center">
    <my-header
      title="焊接日下线"
      showdatatext="合计：108辆"
      v-bind:showdata="showdata"
      v-bind:showbtn="showbtn"
    />
    <div class="data" id="hanjierixiaxian_main"></div>
  </div>
</template>
    <script>
import * as echarts from "echarts";
import myheader from "./myheader";

export default {
  components: {
    "my-header": myheader,
  },
  name: "hanjierixiaxian",
  data() {
    return {
      showdata: true,
      showbtn: false,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let chartDom = document.getElementById("hanjierixiaxian_main");
      let myChart = echarts.init(chartDom, "dark");
      let option;

      option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "8:00",
            "",
            "10:00",
            "",
            "12:00",
            "",
            "14:00",
            "",
            "16:00",
            "",
            "18:00",
            "",
            "20:00",
          ],
        },

        yAxis: {
          type: "value",
          min: 0,
          max: 40,
        },
        series: [
          {
            name: "",
            symbolSize: 10, //设定实心点的大小
            type: "line",
            data: [10, 25, 14, 37, 22, 33, 13, 10, 25, 14, 37, 22, 33, 13],
            areaStyle: {},
            smooth: true,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(72, 128, 255, 0.5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(72, 128, 255, 0)",
                    },
                  ],
                  global: false, // 缺省为 false
                },
                lineStyle: {
                  color: "rgba(72, 128, 255)",
                },
                borderColor: "#FFFFFF",
                borderWidth: 1,
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
    <style  scoped>
.center {
  width: 100%;
  height: 100%;
}
.data {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: rgb(10, 19, 43);
  border: 1px solid rgb(85, 125, 219);
}
</style>
    